<template>
  <div @click="onClick">
    <div v-if="isActive" class="tab_bar_item_icon">
      <slot name="icon_active"></slot>
    </div>
    <div v-else class="tab_bar_item_icon">
      <slot name="icon"></slot>
    </div>
    <div :class="isActive?'tab_bar_red':'tab_bar_black'">
      <slot name="title"></slot>
    </div>
  </div>
</template>
<script>
export default {
  // 父传子
  props: {
    path: {
      type: String,
      required: true,
    },
  },
  methods: {
    onClick() {
      this.$router.push(this.path);
      console.log(this.$router);
    },
  },
  computed: {
    isActive: function () {
      return this.path === this.$route.path;
    },
  },
};
</script>
<style  scoped>
.tab_bar_item_icon img{
    width: 1rem;
    height: 1rem;
}
.tab_bar_red{
    font-size: 0.5rem;
    color:rgb(112, 223, 136);
}
.tab_bar_black{
      font-size: 0.5rem;
    color:rgb(31, 32, 31);
}
</style>